<template>
	<div class="fonts">
		<div class="fontwarp" v-for="(item,index) in fontList" :key="index">
			<p :class="['heightdiv',item.classname]">“长风破浪会有时，直挂云帆济沧海”</p>
			<p class="tips">{{item.name}}<em class="free-source">免费字体</em></p>
		</div>
	</div>
</template>

<script setup>
	import {
		reactive
	} from 'vue';
	const fonts = [{
			"name": "方圆体",
			"classname": "fyt"
		},
		{
			"name": "刀隶体",
			"classname": "dlt"
		},
		{
			"name": "东方大楷",
			"classname": "dfdk"
		},
		{
			"name": "得意黑",
			"classname": "dyh"
		},
		{
			"name": "进步体",
			"classname": "jbt"
		},
		{
			"name": "渔阳体",
			"classname": "yyt"
		},
		{
			"name": "数黑体",
			"classname": "sht"
		},
	]

	const fontList = reactive(fonts)
</script>

<style scoped="scoped">
	.fonts {
		/* width: 98%; */
		margin: 20px auto;
		/* padding: 20px; */
		box-sizing: border-box;
	}

	.fontwarp {
		width: 100%;
		background: #fff;
		border-radius: 8px;
		position: relative;
	}

	.heightdiv {
		padding: 65px 32px 45px;
		font-size: 32px;
		margin-bottom: 20px;
	}

	.fyt {
		font-family: '方圆体';
	}

	.dlt {
		font-family: '刀隶体';
	}

	.dfdk {
		font-family: '东方大楷';
	}

	.dyh {
		font-family: '得意黑';
	}

	.jbt {
		font-family: '进步体';
	}

	.yyt {
		font-family: '渔阳体';
	}

	.sht {
		font-family: '数黑体';
	}

	.tips {
		position: absolute;
		top: 20px;
		left: 20px;
		color: #a6a6a6;
		font-size: 14px;
	}

	.free-source {
		display: inline-block;
		width: 60px;
		height: 18px;
		text-align: center;
		line-height: 20px;
		font-size: 12px;
		color: #fff;
		border-radius: 4px;
		background-color: #05d6b6;
		margin-left: 6px;
	}
</style>